$(document).ready
(
	function()
	{
		// 获取body可用宽高（宽度取浏览器工作区可用宽度[包含滚动条]，高度取除掉margin、padding、border的body高度）
		var body_width = $(window)[0].innerWidth;
		var body_height = $('body').innerHeight();
		// 固定body的尺寸
		$('body').css
		(
			{
				'width': body_width + 'px',
				'height': body_height + 'px'
			}
		);

		// 计算按钮位置
		var button_top_padding = ($('.top').height() - $('.button_prev a').height()) / 2;
		$('.button_prev span').css('margin-top', button_top_padding + 'px');
		$('.button_next span').css('margin-top', button_top_padding + 'px');

		// 计算图片区域可用空间
		var img_area_width = $('.image').width()  - parseInt($('.image img').css('border-left-width')) * 2;
		var img_area_height = $('.top').height() - $('.page').height() - parseInt($('.image img').css('border-left-width')) * 2;

		// 适配图片大小
		function fix_photo_size(img_width, img_height)
		{
			$('.image img').css('opacity', 0);
			if( (img_width > img_area_width) || (img_height > img_area_height) )
			{
				fixed_img_width = img_area_width;
				fixed_img_height = fixed_img_width / img_width * img_height;
			}
			else
			{
				fixed_img_width = img_width;
				fixed_img_height = img_height;
			}
			if(fixed_img_height > img_area_height)
			{
				fixed_img_height = img_area_height;
				fixed_img_width = fixed_img_height / img_height * img_width;
			}
			$('.image img').css('width', fixed_img_width + 'px');
			$('.image img').css('height', fixed_img_height + 'px');
			$('.image img').stop().animate({'opacity': 1}, 1500);
		}
		var img_width = $('.image img').width();
		var img_height = $('.image img').height();
		fix_photo_size(img_width, img_height);

		// 计算缩略图列表上下边距、高度，并应用尺寸
		var thumb_list_margin = parseInt($('.bottom').height() * 0.3 / 2);
		var thumb_list_height = $('.bottom').height() - thumb_list_margin * 2;
		$('.photo_thumb_list').css
		(
			{
				'height': thumb_list_height,
				'margin': thumb_list_margin + 'px auto'
			}
		);

		// 修正缩略图内层容器尺寸（宽度为图片总宽度的2倍，保险起见，防止部分图片因统一高度而宽度超标）
		thumb_total_width = thumb_amount * thumb_list_height * 2;
		$('.thumb_box').css
		(
			{
				'width': thumb_total_width + 'px',
				'height': 'auto'
			}
		);

		// 修正缩略图尺寸
		$('.thumb_box img').css('height', thumb_list_height + 'px');

		// 初始化缩略图状态
		function init_thumb_activation(thumb_index)
		{
			$('.thumb_box img').css('opacity', 0.6);
			$('.thumb_box img').eq(thumb_index-1).css('opacity', 1);
		}
		init_thumb_activation(current_photo_index);

		// 初始化缩略图滑轮位置
		var init_thumb_scroll = 0;
		for(i=0; i<current_photo_index; i++)
		{
			init_thumb_scroll += $('.thumb_box img').eq(i).width();
		}
		init_thumb_scroll -= $('.photo_thumb_list').width() / 2;
		$('.photo_thumb_list').stop().animate
		(
			{scrollLeft: init_thumb_scroll},
			1
		);

		// 监听点击缩略图
		$('.thumb_box img').click
		(
			function()
			{
				// 动态改变URL
				var current_index = $(this).attr('data-thumb_index');
				window.history.pushState({}, 0, current_index);
				// 动态改变翻页按钮
				var next_index = parseInt(current_index) + 1;
				if(next_index > thumb_amount)
				{
					next_index = 1;
				}
				var prev_index = parseInt(current_index) - 1;
				if(prev_index < 1)
				{
					prev_index = thumb_amount;
				}
				$('.button_prev span').attr('data-target_index', prev_index);
				$('.button_next span').attr('data-target_index', next_index);
				// 更新缩略图选中状态
				init_thumb_activation($(this).attr('data-thumb_index'));
				// 更新页码
				$('.page').text(current_index + ' / ' + thumb_amount);
				// 获取图片索引URL
				thumb_url = $(this).attr('src');
				// 分割URL
				thumb_url_arr = thumb_url.split('/');
				// 获取文件名
				file_name = thumb_url_arr[thumb_url_arr.length-1];
				file_name_arr = file_name.split('_');
				if(file_name_arr.length > 2)
				{
					file_name_arr.splice(0, 1);
					file_name = file_name_arr.join('_');
				}
				else
				{
					file_name = file_name_arr[1];
				}
				// 整理URL数组
				thumb_url_arr[thumb_url_arr.length-2] = file_name;
				thumb_url_arr.splice(thumb_url_arr.length-1, 1);
				photo_url = thumb_url_arr.join('/');
				// 修正图片尺寸
				$.post
				(
					HOST_NAME + "Index/get_photo_info",
					{photo_url: thumb_url},
					function(data)
					{
						// 替换图片URL
						var new_photo = new Image();
						new_photo.onload = function()
						{
							var return_data = eval('(' + data + ')');
							fix_photo_size(return_data.width, return_data.height);
							$('.image img').attr('src', photo_url);
						}
						new_photo.src = photo_url;
					}
				);
			}
		);

		// 监听滑轮（Firefox）
		$('.photo_thumb_list')[0].addEventListener
		(
			'DOMMouseScroll',
			function(event)
			{
				var scroll_distance = event.detail * 35;// 修正Firefox滚动量过小
				move_scroll(scroll_distance);
			}
		);
		// 监听滑轮（非Firefox）
		$('.photo_thumb_list').on
		(
			'mousewheel',
			function()
			{
				var scroll_distance = event.deltaY;
				move_scroll(scroll_distance);
			}
		);
		// 滚动滑轮
		function move_scroll(scroll_distance)
		{
			scroll_distance = $('.photo_thumb_list').scrollLeft() + parseInt(scroll_distance) * 2;
			$('.photo_thumb_list').stop().animate
			(
				{scrollLeft: scroll_distance},
				150
			);
			finished_fix_thumb_box = fix_thumb_box_width();
		}

		// 修正缩略图内层容器宽度
		var finished_fix_thumb_box = 0;
		function fix_thumb_box_width()
		{
			if(finished_fix_thumb_box == 0)
			{
				var fixed_box_width = 0;
				for(i=0; i<thumb_amount; i++)
				{
					fixed_box_width += $('.thumb_box img').eq(i).outerWidth(true);
				}
				fixed_box_width += 10;// 修复Firefox未知的盒模型问题
				$('.thumb_box').width(fixed_box_width);
				finished_fix_thumb_box = 1;
			}
		}

		// 监听点击翻页按钮
		$('.page_button').click
		(
			function()
			{
				var target_index = $(this).attr('data-target_index');
				$('.thumb_box img').eq(target_index - 1).click();
				// 联动缩略图滑块
				var box_scroll = 0;
				for(i=0; i<target_index; i++)
				{
					box_scroll += $('.thumb_box img').eq(i).width();
				}
				box_scroll -= $('.photo_thumb_list').width() / 2;
				$('.photo_thumb_list').stop().animate
				(
					{scrollLeft: box_scroll},
					150
				);
			}
		);

	}
);
